<template>
  <div class="details-box hostel-details">
    <div class="swipe-box">
      <div class="back-btn" @click="$router.back(-1)">
        <img src="../../../static/back_detail.png" alt="">
      </div>
      <mt-swipe :show-indicators="false" :auto="0" @change="swipeChange">
        <mt-swipe-item  v-for="(item,index) in banners" :key="index" >
          <img v-lazy="item.photoUrl" :style="defaultImage">
        </mt-swipe-item>
      </mt-swipe>
      <div class="swipe-span-box"><span class="swipe-span">{{swipeIndex}}/{{swipeSize}}</span></div>
    </div>
    <!--Title-->
    <div class="container-box">
      <div class="item" v-if="this.propertyName">
        <span class="item-right">{{translateUTZaw(this.propertyName)}}</span>
      </div>
      <div class="item" v-if="this.street || this.townshipId || this.regionId">
        <span class="item-right" v-if="this.street">{{translateUTZaw(this.street)}},</span>
        <span class="item-right" v-if="this.townshipId">{{getTownshipType(townshipId)}},</span>
        <span class="item-right" v-if="this.regionId">{{getRegionType(regionId)}}</span>
      </div>
      <div class="item">
        <span class="item-left">{{$t('m.Type')}}</span>
        <span class="item-right">{{getHostelType(hostelType)}}</span>
      </div>
      <div class="item">
        <span class="item-left">{{$t('m.Leaseterm')}}</span>
        <span v-if="minLeaseTermType != null"><span class="item-right">{{minLeaseTermType}}</span>&nbsp;{{$t('m.Mounth')}}</span>
      </div>
      <div class="item">
        <span class="item-left">{{$t('m.FloorLevel')}}</span>
        <span class="item-right">{{floorLevel}}</span>
      </div>
      <div class="item">
        <span class="item-left">{{$t('m.ListingID')}}</span>
        <span class="item-right">{{listingId}}</span>
      </div>
    </div>
    <!--Rental-->
    <div class="container-box border-top-10" v-if="propertyRoomList.length &gt; 0">
      <div class="price-box">
        <div class="title">{{$t('m.Rental')}}</div>
        <div class="content">
          <div class="content-inside-box" v-for="(item,index) in propertyRoomList" :key="index" name="rental">
            <div class="icon-box hostel-icon-box">
              <span class="icon-item hostel-room-item">{{getRoomType(item.roomType, item.roomTypeDesc)}}</span>
              <span class="price-currency ps-right" v-if="item.fee">{{regexNum(item.fee)}}&nbsp;Ks</span>
            </div>
            <div class="icon-box hostel-icon-box" v-if="item.width && item.height">
              <p class="icon-item room-item-color">{{item.width}} x {{item.height}} ft</p>
            </div>
            <div class="icon-box hostel-icon-box" v-if="item.facilities">
              <p class="icon-item room-item-color">{{getFacilities(item.facilities)}}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--Rental fee policy-->
    <div class="container-box border-top-10"  v-if="rentalType">
      <div class="price-box">
        <div class="title">{{$t('m.Rentalfeepolicy')}}</div>
        <div class="content">
          <div class="icon-box">
            <span class="icon-item">{{getFeePolicy(rentalType)}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--Rental collection date-->
    <div class="container-box border-top-10"  v-if="rentalCollectionDateType && rentalCollectionDateType != 3">
      <div class="price-box">
        <div class="title">{{$t('m.Rentalcollectiondate')}}</div>
        <div class="content">
          <div class="icon-box">
            <span class="icon-item">{{getCollectionDate(rentalCollectionDateType)}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--Extra fee-->
    <div class="container-box border-top-10" v-if="electronicFee.length &gt; 0">
      <div class="price-box">
        <div class="title">{{$t('m.Extrafee')}}</div>
        <div class="content">
          <div class="content-inside-box" v-for="(item,index) in electronicFee" :key="index" name="rental">
            <div class="icon-box hostel-icon-box">
              <span class="icon-item left-item">{{item.extraName}}</span>
              <span class="price-currency" v-if="item.extraFee">{{regexNum(item.extraFee)}}&nbsp;Ks</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--Deposit (Ks)-->
    <div class="container-box border-top-10" v-if="depositType || depositRefundPolicyBeforeDays || depositPolicyOthers">
      <div class="price-box">
        <div class="title">{{$t('m.DepositKs')}}</div>
        <div class="box-border"></div>
        <div class="content">
          <div class="item">
            <span class="item-left">{{$t('m.Fee')}}</span>
            <span class="item-right">{{getDepositType(depositType)}}</span>
          </div>
          <div class="item" v-if="depositRefundPolicyBeforeDays">
            <span class="item-left">{{$t('m.Refund')}}</span>
            <span class="item-right"><span>{{$t('m.Informlandlord')}}</span> {{depositRefundPolicyBeforeDays}} <span>{{$t('m.daysbeforetermination')}}</span></span>
          </div>
          <div class="item" v-if="depositPolicyOthers">
            <span class="item-left">{{$t('m.Others')}}</span>
            <span class="item-right">{{translateUTZaw(depositPolicyOthers)}}</span>
          </div>
        </div>
      </div>
    </div>
    <!--Tenant-->
    <div class="container-box border-top-10" v-if="tenantMaxAge || onlyStudent || withJob || tenantOthers">
      <div class="price-box">
        <div class="title">{{$t('m.Tenant')}}</div>
        <div class="content">
          <div class="" >
            <span class="icon-item item-checked"  v-if="tenantMaxAge"><i class="el-icon-check green-icon"></i>Max age ( {{tenantMaxAge}} )</span>
            <span class="icon-item item-checked"  v-if="onlyStudent"><i class="el-icon-check green-icon"></i>{{$t('m.Student')}}</span>
            <span class="icon-item item-checked"  v-if="withJob"><i class="el-icon-check green-icon"></i>{{$t('m.Tenantwithjob')}}</span>
          </div>
          <p v-if="tenantOthers">{{translateUTZaw(tenantOthers)}}</p>
        </div>
      </div>
    </div>
    <!--Rules-->
    <div class="container-box border-top-10">
      <div class="price-box">
        <div class="title">{{$t('m.Rules')}}</div>
        <div class="content">
          <div class="rule-times-box" v-if="entranceTimeStart || entranceTimeEnd">
            <span class="rule-times">{{$t('m.Entrancestarttime')}} </span>{{entranceTimeStart}}
            <span style="margin:0 10px;">-</span>
            <span class="rule-times">{{$t('m.Endtime')}} </span>{{entranceTimeEnd}}
          </div>
          <div class="rule-times-box" v-if="electricityTimeStart || electricityTimeEnd">
            <span class="rule-times">{{$t('m.Electricitytimefrom')}} </span>{{electricityTimeStart}}
            <span style="margin:0 10px;">-</span>
            <span class="rule-times">{{$t('m.To')}} </span>{{electricityTimeEnd}}
          </div>
          <div class="" >
            <span class="icon-item item-checked margin-top-5"  v-if="!guestVisit"><i class="el-icon-check green-icon"></i>{{$t('m.NoGuestVisit')}}</span>
            <span class="icon-item item-checked margin-top-5"  v-if="!guestOvernight"><i class="el-icon-check green-icon"></i>{{$t('m.Noguestovernight')}}</span>
            <span class="icon-item item-checked margin-top-5"  v-if="noSmaking"><i class="el-icon-check green-icon"></i>{{$t('m.Nosmoking')}}</span>
            <span class="icon-item item-checked margin-top-5"  v-if="noAlcohol"><i class="el-icon-check green-icon"></i>{{$t('m.Noalcohol')}}</span>
            <span class="icon-item item-checked margin-top-5"  v-if="noNoise"><i class="el-icon-check green-icon"></i>{{$t('m.Nonoise')}}</span>
            <span class="icon-item item-checked margin-top-5"  v-if="cookRice"><i class="el-icon-check green-icon"></i>{{$t('m.Cancookrice')}}</span>
            <span class="icon-item item-checked margin-top-5"  v-if="cookFood"><i class="el-icon-check green-icon"></i>{{$t('m.Cancookfood')}}</span>
          </div>
          <p v-if="ruleOthers">{{translateUTZaw(ruleOthers)}}</p>
        </div>
      </div>
    </div>
    <!--Facilities-->
    <div class="container-box border-top-10" v-if="facilitiesArr.length>0">
      <div class="price-box">
        <div class="title">{{$t('m.Facilities')}}</div>
        <div class="content">
          <div class="">
            <span class="icon-item item-checked margin-top-5"  v-for="item in facilitiesArr" name="facilitie"><i class="el-icon-check green-icon"></i>{{getFacilitieItem(item)}}</span>
          </div>
          <p v-if="facilitiesOthers">{{translateUTZaw(facilitiesOthers)}}</p>
        </div>
      </div>
    </div>
    <!--Description-->
    <div class="container-box border-top-10" v-if="description">
      <div class="price-box">
        <div class="title">{{$t('m.Description')}}</div>
        <div class="content">
          <div class="">
            <p v-html='translateUTZaw(description)' class="description"></p>
          </div>
        </div>
      </div>
    </div>
    <!--google-maps-->
    <div class="container-box border-top-10" v-if="showMap">
      <div class="price-box">
        <div class="title">{{$t('m.Location')}}</div>
        <div class="content content-bottom">
          <div class="map-info" style="color: #83888f;">
            <span class="" v-if="this.street">{{translateUTZaw(this.street)}},</span>
            <span class="" v-if="this.townshipId">{{getTownshipType(townshipId)}}</span>
          </div>
          <div class="map-box">
            <div id='Map' :style="defaultImage"></div>
          </div>
          <div class="rule-times-box" v-if="nearbyBusStop || nearbyMarket">
            <div v-if="nearbyBusStop"><span class="rule-times" style="margin-right:10px;color: #83888f;">{{$t('m.nearbyBusStop')}}</span>{{nearbyBusStop}}</div>
            <div v-if="nearbyMarket"><span class="rule-times"  style="margin-right:10px;color: #83888f;">{{$t('m.Market')}}</span>{{nearbyMarket}}</div>
          </div>
        </div>
      </div>
    </div>
    <!--phones-->
    <div v-if="this.phones">
      <div class="phone-box" @click="getPhone()">
        <img slot="icon" src="../../../static/phone3.png">
        <span>Phone</span>
      </div>
      <div class="zwf-phone"></div>
    </div>
    <mt-popup
      v-model="phonePopupVisible"
      popup-transition="popup-fade"
      style="width: 100%;overflow: auto;"
      :closeOnClickModal="true"
      position="bottom"
    >
      <div>
        <p class="phone-title">{{$t('m.Pleasesayyoufound')}}</p>
        <div v-for="item in phonesArr" class="phone-list">
          <div class="phone-info">{{item}}</div>
          <div class="phone-info phone-img"><a href="javascript:;" @click="phoneCall(item)"><img slot="icon" src="../../../static/help_phone.png"></a></div>
        </div>
        <div class="roomtype-btn-box">
          <mt-button class="reset-btn btn-item" @click="onCancelPhone" type="default">{{$t('m.Cancel')}}</mt-button>
        </div>
      </div>
    </mt-popup>

  </div>

</template>
<script>
  import GoogleMapsLoader from 'google-maps'
  import { hostelInformation, contactCountHostel} from '@/api/mgc_api'
  import Qs from 'qs'
  // 英文翻译
  import township from '@/json/township'
  import region from '@/json/region'
  import hostelTypes from '@/json/hostelTypes'
  import bedroom from '@/json/bedroom'
  import hall from '@/json/hall'
  import roomTypes from '@/json/roomType'
  import facilities from '@/json/facilities'
  import rentalType from '@/json/rentalType'
  import collectionDate from '@/json/collectionDate'
  import electronics from '@/json/electronics'
  import depositType from '@/json/depositType'
  // 缅甸文翻译
  import mm_township from '@/mmJson/township'
  import mm_region from '@/mmJson/region'
  import mm_hostelTypes from '@/mmJson/hostelTypes'
  import mm_bedroom from '@/mmJson/bedroom'
  import mm_hall from '@/mmJson/hall'
  import mm_roomTypes from '@/mmJson/roomType'
  import mm_facilities from '@/mmJson/facilities'
  import mm_rentalType from '@/mmJson/rentalType'
  import mm_collectionDate from '@/mmJson/collectionDate'
  import mm_electronics from '@/mmJson/electronics'
  import mm_depositType from '@/mmJson/depositType'
  // 缅甸unicode
  import mmu_township from '@/mmUnicodeJson/township'
  import mmu_region from '@/mmUnicodeJson/region'
  import mmu_hostelTypes from '@/mmUnicodeJson/hostelTypes'
  import mmu_bedroom from '@/mmUnicodeJson/bedroom'
  import mmu_hall from '@/mmUnicodeJson/hall'
  import mmu_roomTypes from '@/mmUnicodeJson/roomType'
  import mmu_facilities from '@/mmUnicodeJson/facilities'
  import mmu_rentalType from '@/mmUnicodeJson/rentalType'
  import mmu_collectionDate from '@/mmUnicodeJson/collectionDate'
  import mmu_electronics from '@/mmUnicodeJson/electronics'
  import mmu_depositType from '@/mmUnicodeJson/depositType'
  export default {
    name: 'hostelDetails',
    data () {
      return {
        // defaultImg: 'this.src="' + require('../../../static/default.png') + '"',
        defaultImage: {
          backgroundImage: "url(" + require("../../../static/default.png") + ")",
          backgroundRepeat: "no-repeat",
          backgroundSize: "100% 100%",
        },
        phones:'',
        phonesArr:[],
        swipeIndex:1,
        swipeSize:1,
        uesrPhone: null,
        phoneIsHide: true,
        headInfo:{
          name: '',
          photo: '',
          phone: '',
          email: '',
        },
        banners: [],
        street: null,
        propertyName: null,
        township: null,
        townshipId: null,
        region: null,
        regionId: null,
        hostelType: null,
        minLeaseTermType: null,
        floorLevel: '',
        listingId:'',
        propertyRoomList:[],
        rentalType:'',
        rentalDesc:'',
        rentalCollectionDateType:'',
        rentalCollectionDateDesc:'',
        electronicFee: [],
        depositType: null,
        depositFee: null,
        depositRefundPolicyBeforeDays: null,
        depositPolicyOthers: null,
        tenantMaxAge: null,
        withJob: false,
        onlyStudent: false,
        tenantOthers: '',
        entranceTimeStart: '',
        entranceTimeEnd: '',
        electricityTimeStart: '',
        electricityTimeEnd: '',
        guestVisit: false,
        guestOvernight: false,
        noSmaking: false,
        noAlcohol: false,
        noNoise: false,
        cookRice: false,
        cookFood: false,
        ruleOthers: '',
        facilities: [],
        facilitiesOthers: '',
        facilitiesArr: [],
        description:'',
        // map
        nearbyBusStop: '',
        nearbyMarket: '',
        showMap: true,
        latlng: {lat: 202, lng: 100},
        //
        phonePopupVisible: false,
      }
    },
    computed: {
      townshipJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_township
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_township
        } else {
          return township
        }
      },
      regionJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_region
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_region
        } else {
          return region
        }
      },
      hostelTypes(){
        if(this.$store.state.localLang == 'MM'){
          return mm_hostelTypes
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_hostelTypes
        } else {
          return hostelTypes
        }
      },
      bedRoomJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_bedroom
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_bedroom
        } else {
          return bedroom
        }
      },
      hallJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_hall
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_hall
        } else {
          return hall
        }
      },
      roomTypes(){
        if(this.$store.state.localLang == 'MM'){
          return mm_roomTypes
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_roomTypes
        } else {
          return roomTypes
        }
      },
      facilitiesJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_facilities
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_facilities
        } else {
          return facilities
        }
      },
      rentalTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_rentalType
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_rentalType
        } else {
          return rentalType
        }
      },
      collectionDateJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_collectionDate
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_collectionDate
        } else {
          return collectionDate
        }
      },
      electronicsJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_electronics
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_electronics
        } else {
          return electronics
        }
      },
      depositTypeJson(){
        if(this.$store.state.localLang == 'MM'){
          return mm_depositType
        } else if (this.$store.state.localLang == 'MMU'){
          return mmu_depositType
        } else {
          return depositType
        }
      },
    },
    methods: {
      swipeChange (index) {
        this.swipeIndex = index + 1
      },
      // 上下两个组件同步索引
      PictureClick (index) {
        this.$refs.carousel_new.setActiveItem(index)
      },
      PictureClick_new (index) {
        this.$refs.carousel.setActiveItem(index)
      },
      translateDescript(description){
        description = description || '';
        if(this.$i18n.locale == 'MM'){
          return description;
        }else if(this.$i18n.locale == 'MMU'){
          return this.$translateLang(description,'zawgyiTounicode')
        }else {
          return description;
        }
      },
      translateStreet(){
        if(this.$i18n.locale == 'MM'){
          return  this.street;
        }else if(this.$i18n.locale == 'MMU'){
          return this.$translateLang(this.street,'zawgyiTounicode')
        }else {
          return this.street;
        }
      },
      translatePropertyName(){
        if(this.$i18n.locale == 'MM'){
          return  this.propertyName;
        }else if(this.$i18n.locale == 'MMU'){
          return this.$translateLang(this.propertyName,'zawgyiTounicode')
        }else {
          return this.propertyName;
        }
      },
      geolocate () {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            }
            var circle = new window.mapsObj.googleObj.maps.Circle({
              center: geolocation,
              radius: position.coords.accuracy
            })
            window.mapsObj.autocomplete.setBounds(circle.getBounds())
          })
        }
      },
      getPhone () {
        this.phonesArr = this.phones.split(",")
        this.phonePopupVisible = true
      },
      phoneCall (item){
        if (item) {
          window.location.href = 'tel://' + item
        }
      },
      onCancelPhone () {
        this.phonePopupVisible = false
      },
      initMap (latlng) {
        this.isInitMap = true
        /* 初始化地图 */
        let map = new window.mapsObj.googleObj.maps.Map(document.getElementById('Map'), {
          center: latlng,
          scrollwheel: true,
          zoom: 11
        })
        this.latlng.lat = latlng.lat
        this.latlng.lng = latlng.lng
        /* 设置标记 */
        let marker = new window.mapsObj.googleObj.maps.Marker({
          map: map,
          draggable: true,
          animation: window.mapsObj.googleObj.maps.Animation.DROP,
          position: latlng
        })
        /* 拖动marker设置经纬度坐标 */
        window.mapsObj.googleObj.maps.event.addListener(marker, 'dragend', function (MouseEvent) {
          map.setCenter(MouseEvent.latLng)
          var lat = MouseEvent.latLng.lat()
          var lng = MouseEvent.latLng.lng()
          this.latlng.lat = lat
          this.latlng.lng = lng
        })

        //附近超市
        // var request = {
        //   location: latlng,
        //   radius: 1000,
        //   types: ['supermarket']
        // };
        // var service = new window.mapsObj.googleObj.maps.places.PlacesService(map);
        // service.nearbySearch(request, callback)
        // function callback(results, status) {
        //   console.log(results);
        // }
      },
      // 隐藏手机号码后几位
      hidePhone (phone) {
        if ( phone.length>0 ) {
          phone = phone.substring(0,4) + '****'
          this.uesrPhone = phone
          this.phoneIsHide = true
        }
      },
      showPhone () {
        this.uesrPhone = this.headInfo.phone
        this.phoneIsHide = false
        let id = this.id
        let data = {
          type: 1
        }
        let params = Qs.stringify(data)
        contactCountHostel(id, params).then((res) => {
          if (res.data.data.errorID) {
            console.log(res.data.data.errorID)
          } else {
            console.log(res.data.data.errorID)
          }
        })
      },
      floorTranslate (floor) {
        let str = ''
        this.floorJson.forEach((item) => {
          if (item.value == floor) {
            str = item.text || ''
          }
        })
        return str
      },
      regexNum (v,len,split) {
        split = split || ',', len = Math.abs((+len) % 20 || 2)
        v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
        v = parseFloat(v) + ''
        return v.replace(/\d+/, function (v) {
            var lit = v.length % 3 == 0
            var index = lit ? v.length - 3 : -1
            return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
              return k + ((l == index && lit) ? '' : split)
            }).split('').reverse().join('')
          }
        )
      },
      // roomtype -->  hall/bedroom..
      getRoomType (roomType, roomTypeDesc) {
        let str = ''
        if (roomType == 3) {
          //  Bedroom
          this.bedRoomJson.forEach((item) => {
            if (item.value == roomTypeDesc) {
              str = item.text || ''
            }
          })
        } else if(roomType == 4) {
          //  Hall
          this.hallJson.forEach((item) => {
            if (item.value == roomTypeDesc) {
              str = item.text || ''
            }
          })
        } else {
          this.roomTypes.forEach((item) => {
            if (item.value == roomType) {
              str = item.text || ''
            }
          })
        }
        return str
      },
      getFacilities (f){
        let arr = []
        if (!f) {
          return false
        }
        f =f.split(",")
        this.facilitiesJson.forEach((item) => {
          f.forEach((i) => {
            if (item.value == i) {
              arr.push(item.text)
            }
          })
        })
        return arr.toString()
      },
      getFacilitieItem (it) {
        let str = ''
        this.facilitiesJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getTownshipType (t) {
        let str = ''
        this.townshipJson.forEach((item) => {
          if (item.value == t) {
            str = item.text || ''
          }
        })
        return str
      },
      getRegionType (t) {
        let str = ''
        this.regionJson.forEach((item) => {
          if (item.value == t) {
            str = item.text || ''
          }
        })
        return str
      },
      getHostelType (f){
        let arr = []
        if (!f) {
          return false
        }
        f = f.split(",")
        this.hostelTypes.forEach((item) => {
          f.forEach((i) => {
            if (item.value == i) {
              arr.push(item.text)
            }
          })
        })
        return arr.toString()
      },
      getFeePolicy(p){
        let str = ''
        if (p == 3){
          // others Desc
          str = this.rentalDesc
        } else {
          this.rentalTypeJson.forEach((item) => {
            if (item.value == p) {
              str = item.text || ''
            }
          })
        }
        return str
      },
      getCollectionDate(type){
        let str = ''
        if (type == 3){
          // others Desc
          str = ''
        } else if(type == 5) {
          if (!this.rentalCollectionDateDesc) {
            this.rentalCollectionDateType = ''
          } else {
            str = this.rentalCollectionDateDesc
          }
        } else{
          this.collectionDateJson.forEach((item) => {
            if (item.value == type) {
              str = item.text || ''
            }
          })
        }
        return str
      },
      getElectronicType (t) {
        let str = ''
        this.electronicsJson.forEach((item) => {
          if (item.value == t) {
            str = item.text || ''
          }
        })
        return str
      },
      getDepositType (t){
        let str = ''
        if (t == 2){
          if(this.depositFee){
            str = this.regexNum(this.depositFee) + ' Ks'
          } else {
            this.depositTypeJson.forEach((item) => {
              if (item.value == t) {
                str = item.text || ''
              }
            })
          }
        } else {
          this.depositTypeJson.forEach((item) => {
            if (item.value == t) {
              str = item.text || ''
            }
          })
        }
        return str
      },
      // 时间格式化
      dateFormat (value, justMonth) {
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        var t
        if (justMonth) {
          t = m + '-' + Y
        } else {
          t = d + '-' + m + '-' + Y
        }
        return t
      },
      // 当前的状态 uints
      onStatus (value) {
        if(this.$store.state.localLang == 'MM'){
          if (value === 1) {
            return 'ေရာင္းရန္'
          } else if (value === 2) {
            return '​ေရာင္​းၿပီး'
          } else if (value === 3) {
            return 'ဌားရန္'
          } else if (value === 4) {
            return 'ဌားျပီး'
          }
        }else{
          if (value === 1) {
            return 'For sale'
          } else if (value === 2) {
            return 'Sold out'
          } else if (value === 3) {
            return 'For rent'
          } else if (value === 4) {
            return 'Rented out'
          }
        }
      },
      getDetail (id) {
        hostelInformation(id).then((res) => {
          if (res.data.data.errorID === 0) {
            if (res.data.data.object) {
              // 详情页用户头部信息
              let headInfoData = res.data.data.object.userContact
              if (headInfoData) {
                this.headInfo.photo = headInfoData.photo
                this.headInfo.name = headInfoData.name
                this.headInfo.phone = headInfoData.phone
                this.hidePhone(headInfoData.phone)
                this.headInfo.email = headInfoData.email
              }
              let data = res.data.data.object
              this.banners = data.photoUrlList
              // 如果没有图片的话展示默认图片

              if (this.banners.length == 0) {
                this.banners = [{photoUrl: '../static/default.png'}]
              }
              this.swipeSize = this.banners.length
              this.propertyName = data.propertyName
              this.street = data.street
              // 地址处理
              this.townshipId = data.townshipId
              // this.townshipJson.forEach((item) => {
              //   if (item.value === data.townshipId) {
              //     this.township = item.text || ''
              //   }
              // })
              this.regionId = data.regionId
              // this.regionJson.forEach((item) => {
              //   if (item.value === data.regionId) {
              //     this.region = item.text || ''
              //   }
              // })
              // 公寓种类
              this.hostelType = data.hostelTypeId
              // this.hostelTypes.forEach((item) => {
              //   if (item.value == data.hostelTypeId) {
              //     this.hostelType = item.text || ''
              //   }
              // })
              this.minLeaseTermType = data.minLeaseTermType
              this.floorLevel = data.floorLevel
              this.listingId = data.listingId
              this.propertyRoomList = data.propertyRoomList
              this.rentalType = data.rentalType
              this.rentalDesc = data.rentalDesc
              this.rentalCollectionDateType = data.rentalCollectionDateType
              this.rentalCollectionDateDesc = data.rentalCollectionDateDesc
              if (data.electronicFee) {
                this.electronicFee = JSON.parse(data.electronicFee)
              }
              // let arr = '[{"electronicType":"1","fee":"2000.0000"},{"electronicType":"2","fee":"2000.0000"}]'
              // this.electronicFee = JSON.parse(arr)
              this.depositType = data.depositType
              this.depositFee = data.depositFee
              this.depositRefundPolicyBeforeDays = data.depositRefundPolicyBeforeDays
              this.depositPolicyOthers = data.depositPolicyOthers
              this.tenantMaxAge = data.tenantMaxAge
              this.withJob = data.withJob
              this.onlyStudent = data.onlyStudent
              this.tenantOthers = data.tenantOthers
              this.entranceTimeStart = data.entranceTimeStart
              this.entranceTimeEnd = data.entranceTimeEnd
              this.electricityTimeStart = data.electricityTimeStart
              this.guestVisit = data.guestVisit
              this.guestOvernight = data.guestOvernight
              this.noSmaking = data.noSmaking
              this.noAlcohol = data.noAlcohol
              this.noNoise = data.noNoise
              this.cookRice = data.cookRice
              this.cookFood = data.cookFood
              this.ruleOthers = data.ruleOthers
              // this.facilitiesJson.forEach((item) => {
              //   data.facilities.split(",").forEach((i) => {
              //     if (item.value == i) {
              //       this.facilities.push(item.text)
              //     }
              //   })
              // })
              if (data.facilities) {
                this.facilitiesArr = data.facilities.split(",")
              } else {
                this.facilitiesArr = []
              }
              this.facilitiesOthers = data.facilitiesOthers

              // description
              let text = ''
              if (data.description != null) {
                text = data.description.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(new RegExp("\n", "gm"),'<br/>')
              }

              // this.description =  this.translateDescript(text)
              this.description =  text

              // 地图渲染
              this.nearbyBusStop = data.nearbyBusStop
              this.nearbyMarket = data.nearbyMarket
              let latlng = {
                lat: '',
                lng: ''
              }
              latlng.lat = data.latitude
              latlng.lng = data.longitude
              if (data.latitude) {
                this.showMap = true
                setTimeout(() => {
                  this.initMap(latlng)
                }, 1500)
              } else {
                this.showMap = false
              }
              //  phones
              this.phones = data.userContact.phone
            }else {
              console.log('err')
            }
          }else {
            console.log('err')
          }

        })

      },
      translateUTZaw(str){
        if (!str) return '';
        return this.$translateLang(str, 'unicodeTozawgyi')
      },
    },
    mounted () {
      if (!(navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
        console.log("https://bestproperty.com.mm/index.html" + window.location.hash, 'url的表示')
        window.open("https://bestproperty.com.mm/index.html" + window.location.hash);  //跳转到wap端的网址
        return;
      }
      /* Google Map Init */
      GoogleMapsLoader.KEY = 'AIzaSyD6fBhKRpK6KPw8pxwQAQDI3AyzViGIUOY'
      GoogleMapsLoader.VERSION = '3.14'
      GoogleMapsLoader.LIBRARIES = ['geometry', 'places']
      GoogleMapsLoader.load(function (google) {
        let geocoder = new google.maps.Geocoder()
        let googleObj = google
        let mapsObj = {autocomplete: '', geocoder: geocoder, googleObj: googleObj}
        window.mapsObj = mapsObj
      })

      // 页面跳转进来获取参数
      this.id = this.$route.query.id
      // this.id = 255
      // 调用接口获取详情页面的数据
      this.getDetail(this.id)
      window.scrollTo(0, 0)
    }
  }
</script>
<style scoped>
  .mint-swipe{
    height:200px;
  }
  .mint-swipe .mint-swipe-item img{
    height:100%;
    width:100%;
    display: block;
  }

  .swipe-box{
    position: relative;
    text-align: center;
  }
  .swipe-span-box{
    position: absolute;
    bottom:10px;
    left:0;
    right:0;
  }
.swipe-span{
 padding:2px 8px;
  background: rgba(0,0,0,.4);
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  color:#fff;
}
  .container-box {
    padding: 14px;
    text-align: left;
  }
  .item-left {
    min-width: 80px;
    margin-right: 10px;
    display: inline-block;
    color: #83888f;
    /*height: 24px;*/
    line-height: 24px;
  }
  .item-right {
    color: #0b0b0b;
    /*height: 24px;*/
    line-height: 24px;
  }
  .border-top-10{
    border-top: 10px solid rgb(242, 242, 242);
  }
  .title{
    font-size: 15px;
    color: #ef9f02;
    padding-bottom: 8px;
  }
  .price-currency {
    color: red;
  }
  .ps-right{
    float:right;
  }
  .room-item-color {
    color: #666;
  }
  .icon-box{
    height: 24px;
    line-height: 24px;
  }
  .icon-box p{
    margin:0;
  }
  .left-item{
    min-width: 38%;
    display: inline-block;
  }
  .item-checked{
    padding: 3px 6px;
    border: 1px solid #83888f;
    border-radius: 6px;
    margin-right: 5px;
    color: #83888f;
    display: inline-block;
  }
  .margin-top-5{
    margin-top:6px;
  }
  .map-box{
    height:200px;
    margin-bottom:5px;
  }
  .map-box #Map{
    height:100%;
  }
  .map-info{
    margin-bottom:5px;
  }
  .description{
    margin:0;
    overflow: hidden;
    word-wrap: break-word;
  }
  .back-btn{
    position: absolute;
    top:10px;
    left:12px;
    width:32px;
    height: 32px;
    background: rgba(60,60,60,.2);
    z-index:99;
    padding:7px;
    border-radius: 16px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .back-btn img{
    display: block;
    width: 100%;
    height: 100%;
  }
  .phone-box{
    background: rgb(51, 204, 102);
    line-height: 0.18rem;
    height: 0.18rem;
    color:#fff;
    padding: .12rem;
    box-sizing: content-box;
    text-align: center;
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
  }
  .phone-box img,.phone-img img{
    height: 0.22rem;
    width: 0.22rem;
    vertical-align: middle;
  }
  .zwf-phone {
    padding: .21rem 0;
  }
  .phone-list{
    height: 0.22rem;
    Line-height: 0.22rem;
    text-align: left;
    padding: .12rem;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
  }
  .phone-title{
    padding:.15rem .12rem;
    margin:0;
    color:#ef9f02;
    border-bottom: 1px solid #f0f0f0;
  }
  .phone-info{
    flex: 1;
  }
  .phone-img{
    text-align: right;
  }
  .roomtype-btn-box{
    padding: .16rem;
    overflow: hidden;
    display: flex;
  }
  .roomtype-btn-box .btn-item{
    flex: 1;
  }
</style>
